<!-- 故事管理 -->
<template>
	<div class="padding-container">
		<!-- 搜索栏 -->
		<el-card class="search">
			<!-- 使用el布局 -->
			<el-row>
				<!-- 左侧搜索信息占80% -->
				<el-col :span="20">
					<el-col :span="8">
						<div class="search_grop">
							<el-input placeholder="输入名称查询" prefix-icon="el-icon-search" v-model="searchModel.storyName"
								size="medium">
							</el-input>
						</div>
					</el-col>
					<el-col :span="8">
						<div class="search_grop">
							<el-input placeholder="输入景区ID查询" prefix-icon="el-icon-search" v-model="searchModel.scenicId"
								size="medium">
							</el-input>
						</div>
					</el-col>
					<el-col :span="8">
						<div class="search_grop">
							<el-select v-model="searchModel.storyStatus" clearable placeholder="请选择" size="medium">
								<el-option v-for="dict in status" :key="dict.dictValue" :label="dict.dictLabel"
									:value="dict.dictValue" />
							</el-select>
						</div>
					</el-col>
				</el-col>
				<!-- 左侧搜索栏按钮占20% -->
				<el-col :span="4">
					<el-col :span="12">
						<div>
							<el-button type="primary" v-waves plain size="medium" @click="search">搜索</el-button>
						</div>
					</el-col>
					<el-col :span="12">
						<div>
							<el-button type="success" plain size="medium" @click="openEdit(null)">添加</el-button>
						</div>
					</el-col>
				</el-col>
			</el-row>
		</el-card>
		<!-- 显示栏 -->
		<el-card class="tables">
			<el-table height="350" :data="tableData" style="width: 100%" v-loading="tableLoading">
				<el-table-column type="index" label="#" width="80">
					<template slot-scope="scope">
						{{ (searchModel.pageNum - 1) * searchModel.pageSize + scope.$index + 1 }}
					</template>
				</el-table-column>
				<el-table-column prop="storyName" label="名称" width="290" align="center" :show-overflow-tooltip='true'>
					<template slot-scope="scope">
						<router-link :to="'/drama/index/'+scope.row.storyId">
							{{scope.row.storyName}}
						</router-link>
					</template>
				</el-table-column>
				<el-table-column prop="synopsis" label="故事简介" width="300" align="center" :show-overflow-tooltip='true'>
				</el-table-column>
				<el-table-column prop="scenicId" label="景区ID" width="70" align="center" :show-overflow-tooltip='true'>
				</el-table-column>
				<el-table-column prop="createBy" label="创建者" width="100" align="center" :show-overflow-tooltip='true'>
				</el-table-column>
				<el-table-column prop="createTime" label="创建时间" width="300" align="center"
					:show-overflow-tooltip='true'>
				</el-table-column>
				<el-table-column prop="updateBy" label="更新者" width="100" align="center" :show-overflow-tooltip='true'>
				</el-table-column>
				<el-table-column prop="updateTime" label="更新时间" width="300" align="center"
					:show-overflow-tooltip='true'>
				</el-table-column>
				<el-table-column prop="remark" label="备注" width="300" align="center" :show-overflow-tooltip='true'>
				</el-table-column>
				<el-table-column align="right" width="150">
					<template slot-scope="scope">
						<el-button type="primary" plain size="mini" @click="openEdit(scope.row.storyId)">修改</el-button>
						<el-button type="primary" :type="dict.dictValue==0?'success':'warning'" plain
							v-for="dict in status" v-if="scope.row.storyStatus === dict.dictValue" size="mini"
							@click="toggleStatus(scope.row.storyId,dict.dictValue)">{{dict.dictLabel}}</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>
		<!-- 分页 -->
		<div class="page">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="searchModel.pageNum" :page-sizes="[5, 10, 15, 20]" :page-size="searchModel.pageSize"
				:pager-count="11" layout="total, sizes, prev, pager, next, jumper" :total="total" align="center"
				background>
			</el-pagination>
		</div>
		<!-- 弹出框 -->
		<el-dialog v-el-drag :title="dialogTitle" :visible.sync="dialogVisible" width="75%" @close="handleClose">
			<!-- 弹出框详细内容 -->
			<el-form ref="ruleForm" :rules="Validate" :model="ruleForm">

				<el-form-item prop="img" label="故事封面">
					<el-upload class="avatar-uploader" action="api/story/insert" :data="this.ruleForm"
						:show-file-list="false" :before-upload="beforeAvatarUpload" :auto-upload="false" ref="upload"
						:on-change="PicturePreview" :on-success="uploadSuccess">
						<img v-if="imageUrl" :src="imageUrl" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</el-form-item>
				<el-form-item prop="storyName">
					<md-input v-model="ruleForm.storyName" name="storyName" placeholder="请输入故事名称">
						故事名称
					</md-input>
				</el-form-item>
				<el-form-item label="简介" prop="synopsis">
					<el-input type="textarea" v-model="ruleForm.synopsis"></el-input>
				</el-form-item>
				<el-form-item label="备注" prop="remark">
					<el-input type="textarea" v-model="ruleForm.remark"></el-input>
				</el-form-item>
			</el-form>
			<!-- 弹出框尾部插槽 -->
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="submit('ruleForm')" :loading="btnLoading">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import waves from "@/directives/waves/index.js"
	import ElDrag from "@/directives/ElDrag/index.js"
	import MdInput from "@/components/MDInput"
	import {
		list,
		update,
		selectStoryById,
		insert
	} from "@/api/story"
	import dictManage from "@/api/common/dictManage"
	import {
		createLogger
	} from "vuex"
	export default {
		directives: {
			waves,
			ElDrag
		},
		components: {
			MdInput
		},
		data() {
			return {
				// 表格加载
				tableLoading: false,
				// 按钮加载
				btnLoading: false,
				// 搜索条件 + 页数 + 每页显示条目数 ，前端发起请求可以直接传入 searchModel 对象
				searchModel: {
					pageNum: 1,
					pageSize: 10,
					storyName: "",
					scenicId: "",
					storyStatus: ""
				},
				// 弹出窗标题
				dialogTitle: '',
				// 弹出窗显示
				dialogVisible: false,
				// 添加 点击的
				// 总条数
				total: null,
				// 表单数据
				form: {},
				// 表格数据
				tableData: [],
				ruleForm: {
					storyId: null,
					storyName: '',
					synopsis: '',
					remark: '',
					scenicId: '',
					img: ''
				},
				Validate: {
					storyName: [{
						required: true,
						message: '请输入故事名称',
						trigger: 'blur'
					}],
					synopsis: [{
						required: true,
						message: '请输入故事简介',
						trigger: 'blur'
					}],
					img: [{
						required: true,
						message: '请上传故事封面'
					}]
				},
				status: [],
				imageUrl: '',
				file: ''
			}
		},
		created() {
			this.getData()
			dictManage.getDictData('sys_normal_disable').then(res => {
				this.status = res.data
			})
		},
		methods: {
			//上传图片
			PicturePreview(file) {
				console.log("111");
				this.imageUrl = URL.createObjectURL(file.raw);
				this.ruleForm.img = this.imageUrl
				this.file = file.raw
			},
			beforeAvatarUpload(file) {
				console.log("222");
				const isJPG = file.type === 'image/jpeg';
				const isLt2M = file.size / 1024 / 1024 < 2;

				if (!isJPG) {
					this.$message.error('上传头像图片只能是 JPG 格式!');
				}
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 2MB!');
				}
				return isJPG && isLt2M;
			},
			//列表
			getData(data) {
				this.tableLoading = true
				list(data).then(res => {
					this.tableData = res.rows
					this.total = res.total
					this.tableLoading = false
				})
			},
			// 弹窗关闭触发
			handleClose() {
				console.log("关闭了");
			},
			handleSizeChange(val) {
				this.searchModel.pageSize = val
				this.getData(this.searchModel)
			},
			handleCurrentChange(val) {
				this.searchModel.pageNum = val
				this.getData(this.searchModel)
			},
			// 搜索
			search() {
				this.getData(this.searchModel)
			},
			// 添加和修改都走这里
			openEdit(id) {
				if (id) {
					let tSysStory = {
						storyId:id
					}
					selectStoryById(tSysStory).then(res => {
						this.ruleForm.storyId = res.data.storyId
						this.ruleForm.storyName = res.data.storyName
						this.ruleForm.synopsis = res.data.synopsis
						this.ruleForm.remark = res.data.remark
						this.imageUrl = "http://"+res.data.img
					})
				this.dialogTitle = '修改故事' // 修改
			} else {
				this.ruleForm = {}
				this.ruleForm.storyId = 0
				//登录注册、图片上传
				this.ruleForm.scenicId = 1 //景区id
				this.imageUrl = ""
				this.dialogTitle = '添加故事' // 添加
			}
			this.dialogVisible = true;
		},
		// 禁用启用
		toggleStatus(id, status) {
			if (status == 1) {
				status = 0
			} else {
				status = 1
			}
			let tSysStory = {
				storyId: id,
				storyStatus: status
			}
			update(tSysStory).then(res => {
				this.getData()
			})
		},
		//增，改
		submit(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					this.tableLoading = true
					this.$refs.upload.submit()
					this.dialogVisible = false
					this.getData()
				} else {
					return false;
				}
			})
		},
		uploadSuccess(response, file, fileList){
			console.log("response");
			console.log(response);
		}
	}
	}
</script>

<style scoped>
	.dialog-goods-form .title {
		display: inline-block;
		margin-bottom: 15px;
		font-size: 18px;
	}

	.dialog-goods-form .el-input {
		width: 400px;
	}

	.dialog-goods-form .el-select {
		width: 400px;
	}

	.dialog-goods-list {
		height: 350px;
		overflow-y: auto;
	}

	a {
		color: rgb(68, 134, 181)
	}

	a:hover {
		color: rgb(32, 160, 255)
	}

	/* 上传图片 */
	>>>.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	>>>.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	>>>.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}

	>>>.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
</style>